<template>
  <view class="position-page">
    <!-- 页面主体 -->
    <view class="main-container">
      <!-- 顶部信息区 -->
      <view class="header-section">
        <view class="main-title">职位名称</view>
        <view class="sub-title">请输入您想发布的相关职业的职位名称</view>
      </view>
      
      <!-- 输入框区域 -->
      <view class="input-box">
        <input 
          class="name-input"
          v-model="positionName"
          placeholder="请输入职位名称"
          maxlength="20"
          placeholder-style="color: #BDBDBD"
        />
        <text class="word-count">{{positionName.length}}/20</text>
      </view>
      
      <!-- 分类选择区 -->
      <view class="category-section">
        <!-- 分类标签页 -->
        <scroll-view scroll-x class="scroll-tab" show-scrollbar="false">
          <view class="tab-container">
            <view 
              class="tab-item" 
              :class="{'active': currentTab === index}"
              v-for="(tab, index) in tabs" 
              :key="index"
              @tap="switchTab(index)"
            >
              <text class="tab-text">{{tab}}</text>
              <view class="tab-line" v-if="currentTab === index"></view>
            </view>
          </view>
        </scroll-view>
        
        <!-- 分类内容 -->
        <swiper class="category-swiper" :current="currentTab" @change="onSwiperChange">
          <!-- 一级分类 -->
          <swiper-item>
            <scroll-view scroll-y class="category-scroll">
              <view class="category-list">
                <view 
                  class="category-item" 
                  :class="{'selected': selectedCategories[0] === item}"
                  v-for="(item, index) in levelOneList" 
                  :key="index"
                  @tap="selectCategory(0, item)"
                >
                  <text class="item-text">{{item}}</text>
                  <text class="check-icon" v-if="selectedCategories[0] === item">✓</text>
                </view>
              </view>
            </scroll-view>
          </swiper-item>
          
          <!-- 二级分类 -->
          <swiper-item>
            <scroll-view scroll-y class="category-scroll">
              <view class="category-list">
                <view 
                  class="category-item" 
                  :class="{'selected': selectedCategories[1] === item}"
                  v-for="(item, index) in levelTwoList" 
                  :key="index"
                  @tap="selectCategory(1, item)"
                >
                  <text class="item-text">{{item}}</text>
                  <text class="check-icon" v-if="selectedCategories[1] === item">✓</text>
                </view>
              </view>
            </scroll-view>
          </swiper-item>
          
          <!-- 三级分类 -->
          <swiper-item>
            <scroll-view scroll-y class="category-scroll">
              <view class="category-list">
                <view 
                  class="category-item" 
                  :class="{'selected': selectedCategories[2] === item}"
                  v-for="(item, index) in levelThreeList" 
                  :key="index"
                  @tap="selectCategory(2, item)"
                >
                  <text class="item-text">{{item}}</text>
                  <text class="check-icon" v-if="selectedCategories[2] === item">✓</text>
                </view>
              </view>
            </scroll-view>
          </swiper-item>
        </swiper>
      </view>
    </view>
    
    <!-- 底部保存按钮 -->
    <view class="bottom-button">
      <button class="save-btn" @tap="savePosition">确认保存</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      positionName: '',
      currentTab: 0,
      tabs: ['请选择分类', '请选择二级分类', '请选择三级分类'],
      selectedCategories: ['', '', ''],
      
      // 模拟数据
      levelOneList: ['一级分类', '一级分类'],
      levelTwoList: ['二级分类', '二级分类', '二级分类', '二级分类'],
      levelThreeList: ['三级分类', '三级分类', '三级分类', '三级分类', '三级分类', '三级分类', '三级分类']
    }
  },
  methods: {
    // 切换标签页
    switchTab(index) {
      this.currentTab = index;
    },
    
    // 滑动切换
    onSwiperChange(e) {
      this.currentTab = e.detail.current;
    },
    
    // 选择分类
    selectCategory(level, item) {
      this.$set(this.selectedCategories, level, item);
      
      // 如果当前不是最后一个标签页，自动切换到下一个
      if (level < 2) {
        setTimeout(() => {
          this.currentTab = level + 1;
        }, 300);
      }
    },
    
    // 保存职位
    savePosition() {
      if (!this.positionName.trim()) {
        uni.showToast({
          title: '请输入职位名称',
          icon: 'none'
        });
        return;
      }
      
      // 将数据返回上一页
      const pages = getCurrentPages();
      const prevPage = pages[pages.length - 2];
      
      if (prevPage && prevPage.$vm) {
        prevPage.$vm.companyName = this.positionName;
      }
      
      uni.navigateBack();
    }
  }
}
</script>

<style lang="scss">
page {
  background-color: #F6F7F9;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.position-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-container {
  flex: 1;
  padding-bottom: 120rpx;
}

/* 顶部标题区域 */
.header-section {
  padding: 30rpx 40rpx;
  background-color: #FFFFFF;
  border-radius: 0 0 30rpx 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 20rpx;
  
  .main-title {
    font-size: 38rpx;
    font-weight: 600;
    color: #333333;
    margin-bottom: 12rpx;
  }
  
  .sub-title {
    font-size: 28rpx;
    color: #999999;
    line-height: 1.4;
  }
}

/* 输入框样式 */
.input-box {
  margin: 0 30rpx 30rpx;
  padding: 30rpx;
  background-color: #FFFFFF;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
  position: relative;
  
  .name-input {
    width: 100%;
    height: 80rpx;
    font-size: 30rpx;
    color: #333333;
    background: #F6F7F9;
    border-radius: 12rpx;
    padding: 0 30rpx;
    box-sizing: border-box;
  }
  
  .word-count {
    position: absolute;
    right: 50rpx;
    bottom: 54rpx;
    font-size: 24rpx;
    color: #BDBDBD;
  }
}

/* 分类选择区域 */
.category-section {
  margin: 0 30rpx;
  background-color: #FFFFFF;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

/* 标签滚动区 */
.scroll-tab {
  width: 100%;
  white-space: nowrap;
  border-bottom: 1rpx solid #F0F0F0;
  
  .tab-container {
    display: flex;
    height: 88rpx;
    
    .tab-item {
      flex: 1;
      height: 88rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      min-width: 180rpx;
      
      .tab-text {
        font-size: 28rpx;
        color: #666666;
        transition: all 0.2s;
      }
      
      .tab-line {
        position: absolute;
        bottom: 0;
        width: 40rpx;
        height: 4rpx;
        background-color: #3A86FF;
        border-radius: 2rpx;
      }
      
      &.active {
        .tab-text {
          font-weight: 500;
          color: #3A86FF;
        }
      }
    }
  }
}

/* 分类内容区 */
.category-swiper {
  height: 700rpx;
}

.category-scroll {
  height: 100%;
}

.category-list {
  padding: 20rpx 0;
  
  .category-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 40rpx;
    
    .item-text {
      font-size: 30rpx;
      color: #333333;
    }
    
    .check-icon {
      color: #3A86FF;
      font-weight: bold;
    }
    
    &.selected {
      background-color: rgba(58, 134, 255, 0.06);
      
      .item-text {
        color: #3A86FF;
        font-weight: 500;
      }
    }
    
    &:active {
      background-color: rgba(0, 0, 0, 0.03);
    }
  }
}

/* 底部按钮 */
.bottom-button {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24rpx 40rpx calc(24rpx + constant(safe-area-inset-bottom));
  padding: 24rpx 40rpx calc(24rpx + env(safe-area-inset-bottom));
  background-color: #FFFFFF;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  z-index: 100;
  
  .save-btn {
    height: 90rpx;
    line-height: 90rpx;
    background: linear-gradient(135deg, #4C8DF5 0%, #3A86FF 100%);
    border-radius: 45rpx;
    font-size: 32rpx;
    color: #FFFFFF;
    font-weight: 500;
    border: none;
    
    &:active {
      opacity: 0.9;
    }
  }
}
</style> 